<template>
	<view class="homeView">
		<view class="centerBox">
			<homePage v-if="value1 === 0"></homePage>
			<activity v-if="value1 === 1"></activity>
			<square v-if="value1 === 2"></square>
			<wallet v-if="value1 === 3"></wallet>
			<like v-if="value1 === 4"></like>
		</view>
		<view>
			<u-tabbar :value="value1" @change="change1" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
				<u-tabbar-item text="主页"></u-tabbar-item>
				<u-tabbar-item text="ins"></u-tabbar-item>
				<u-tabbar-item text="广场"></u-tabbar-item>
				<u-tabbar-item text="订单"></u-tabbar-item>
				<u-tabbar-item text="我的"></u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	import homePage from '../homePage/homePage.vue';
	import activity from '../activity/activity.vue';
	import square from '../square/square.vue';
	import wallet from '../wallet/wallet.vue';
	import like from '../like/like.vue';
	export default {
		components: {
			homePage,
			activity,
			square,
			like
		},
		data() {
			return {
				value1: 4,
			}
		},
		methods: {
			change1(e) {
				this.value1 = e
			},
		}
	}
</script>

<style scoped lang="scss">
	.homeView {
		width: 100%;
		height: 100%;
		// border: 1px solid red;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.centerBox {
			flex: 1;
			width: 100%;
			// border: 1px solid green;
			box-sizing: border-box;
		}
	}
</style>